<template>
  <div class="friend">
  
  
    <div class="tab">
      <mu-list>
      <div class="item">
      <mu-list-item 
        title="New Friend"
        @click="showAddFriendDialog()">
        <mu-icon slot="left"
                 value="person_add"
                 color="#d84315" />
        <mu-icon value="keyboard_arrow_right"
                 slot="right" />
      </mu-list-item>
      <mu-divider inset/>
      <mu-list-item 
      title="Groups"
      @click="showGroupDialog()">
        <mu-icon slot="left"
                 value="people"
                 color="#1976d2" />
        <mu-icon value="keyboard_arrow_right"
                 slot="right" />
      </mu-list-item>
      <mu-divider inset/>
      <mu-list-item title="Official Accour">
        <mu-icon slot="left"
                 value="person"
                 color="#1976d2" />
        <mu-icon value="keyboard_arrow_right"
                 slot="right" />
      </mu-list-item>
      </div>
    </mu-list>
  
    </div>
    <div class="title-3">
      <span style="color: rgba(0, 0, 0, .8)">My Friends</span>
    </div>
  
    <mu-list>
      <!--动态渲染-->
      <div v-for="item of friends" class="item">
        <mu-list-item :title="item.name"
                      @click="showPersonindex(item._id)"
                      :disableRipple="true">
          <mu-avatar :src="item.avatar"
                     slot="leftAvatar" />
          <mu-icon value="chat_bubble"
                   slot="right" />
        </mu-list-item>
        <mu-divider inset/>
      </div>
    </mu-list>
    <mu-dialog title="Add friends" width="360" :open.sync="addFriendDialogVisibale">
    this is simple Dialog
    <mu-text-field v-model="input"></mu-text-field>
    <mu-icon-button icon="check_circle" @click="submitAddFrienDialog()" />
    <mu-icon-button icon="remove_circle" @click="closeAddFriendDialog()" />
  </mu-dialog>

  <mu-dialog title="Groups" width="360" :open.sync="groupDialogVisiable">
    Group1
    <div v-for="item of friends" class="item">
        <mu-list-item :title="item.name"
                      @click="showPersonindex(item._id)"
                      :disableRipple="true">
          <mu-avatar :src="item.avatar"
                     slot="leftAvatar" />
          <mu-icon value="chat_bubble"
                   slot="right" />
        </mu-list-item>
        <mu-divider inset/>
      </div>
    <mu-icon-button icon="remove_circle" @click="closeGroupDialog()" />
  </mu-dialog>
  </div>
</template>
<script>
export default {
  name: 'friend',
  data() {
    return {
      addFriendDialogVisibale: false,
      input: '',
      groupDialogVisiable: false
    }
  },
  computed: {
    // 获取全部好友
    friends() {
      return this.$store.state.data.friends
    }
  },
  methods: {
    // 点击展示个人主页
    showPersonindex(e) {
      this.$store.commit('getActiveId', { activeId: e })
      this.$store.commit('showPersonindex')
      this.groupDialogVisiable = false
    },
    showAddFriendDialog() {
      this.addFriendDialogVisibale = true
    },
    closeAddFriendDialog() {
      this.addFriendDialogVisibale = false
    },
    submitAddFrienDialog() {
      if (this.input === '') {
        console.log('no input')
      }
      this.showAddFriendDialog = false
    },
    showGroupDialog() {
      this.groupDialogVisiable = true
    },
    closeGroupDialog() {
      this.groupDialogVisiable = false
    }
  }
}

</script>
<style lang="stylus"  scoped>
@import '../../common/stylus/mixin.styl'
.friend
  .item
    background color-w
  .title-1
    position:relative
    height: 8vh
    line-height: 8vh
    text-align:center
    .mu-icon
      position: absolute;
      top:50%;
      left: 10%;
      transform:translate(-50%, -50%);
      color: color-b
    .mu-icon-button
      position: absolute;
      top:50%;
      left: 94%;
      transform:translate(-50%, -50%);
      color: color-b
    .text
      display: inline-block
      vertical-align: top
      font-size: 1.2em
  .tab
    height: 12vh
    overflow:hidden
    background: color-w
    .mu-tabs
      background:color-w
      color:color-b
  .title-2
    padding-left:4vw
    height: 6vh
    line-height: 6vh
  .mac
    position:relative
    height: 10vh
    background: color-w
  .title-3
    padding-left:4vw
    height: 4vh
    line-height: 5vh
    
</style>
